<template>
	<view class="search-con row-warpper">
		<input v-model="inputValue" class="search" />
		<icon @click="beClick" class="search-icon" type="search" size="15"></icon>
	</view>
</template>

<script>
	export default {
		name: "uSearch",
		props: ["value"],
		data() {
			return {
				inputValue: ''
			}
		},
		watch: {
			value(val) {
				this.inputValue = this.value
			},
			inputValue(val) {
				this.$emit("input", this.inputValue)
			}
		},
		methods: {
			/**
			 * 搜索按钮被点击
			 */
			beClick() {
				this.$emit("search")
			}
		}
	}
</script>

<style lang="less">
	.search-con {
		padding: 5px;
		padding-left: 10px;
		margin: 5px;
		border-radius: 15px;
		border: 1px solid #f1f1f1;
		background-color: #ffffff;
		justify-content: space-between;

		.search-icon {
			margin: 5px;
		}

		.search {
			margin-left: 10px;
			width: 80%;
		}
	}
</style>
